<!--
 * @Author: lmh
 * @Date: 2021-08-11 10:38:16
 * @LastEditTime: 2021-08-23 17:55:30
 * @LastEditors: lmh
 * @Description: 首页
-->
<template>
  <div class="box">
    <div class="form-box">
      <a-form :model="formState" layout="inline">
        <a-form-item label="姓名：">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="性别">
          <a-select v-model:value="formState.gender" placeholder>
            <a-select-option value="male">男</a-select-option>
            <a-select-option value="female">女</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="卡号">
          <a-input v-model:value="formState.cardNumber" />
        </a-form-item>
        <a-form-item label="证件号">
          <a-input v-model:value="formState.CardId" />
        </a-form-item>
        <a-form-item label="信息更新时间">
          <a-range-picker v-model:value="formState.range" format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">搜索</a-button>
          <a-button
            type="primary"
            style="margin-left: 20px;"
            @click="handleExportByCondition"
          >按查询条件导出</a-button>
        </a-form-item>
      </a-form>
      <div style="margin-top: 20px;">
        <a-button style="margin-right: 20px;">批量导出选中信息</a-button>
        <a-button @click="handleExportRecoder">导出记录</a-button>
      </div>
    </div>
    <div class="table-box">
      <a-table
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="tableData"
        :pagination="{
          total: tableData.length,
          pageSizeOptions:['10','20','30','40','50'],
          'show-size-changer': true,
          'show-quick-jumper': true
        }"
        :scroll="{ y: tableHeight  }"
      >
        <template #operation="{ record }">
          <a-button type="primary" size="small" @click="handleDetailClick(record)">患者详情</a-button>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { message, notification } from 'ant-design-vue';
import { reactive, toRefs, onMounted, onUpdated, getCurrentInstance } from 'vue';
import { getList, userList } from '@/service/user';

export default {
  setup(props, context) {
    const data = reactive({
      visible: false,
      formState: {
        name: '',
        gender: '',
        cardNumber: '',
        CardId: '',
        range: null,
      },
      columns: [
        {
          title: '序号',
          width: 80,
          customRender: text => text.index + 1,
        },
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '性别',
          dataIndex: 'gender',
        },
        {
          title: '卡号',
          dataIndex: 'cardNumber',
        },
        {
          title: '证件号',
          dataIndex: 'IdNumber',
        },
        {
          title: '信息更新时间',
          dataIndex: 'updateTime',
        },
        {
          title: '图片数量',
          dataIndex: 'pictureNumber',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          slots: { customRender: 'operation' },
        },
      ],
      selectedRowKeys: [],
      tableData: [],
      tableHeight: document.documentElement.clientHeight + 'px',
    });
    const { proxy } = getCurrentInstance();
    onMounted(() => {
      data.tableHeight =
        document.querySelector('.box').clientHeight -
        document.querySelector('.form-box').clientHeight -
        120 +
        'px';
      window.onresize = function () {
        data.tableHeight =
          document.querySelector('.box').clientHeight -
          document.querySelector('.form-box').clientHeight -
          120 +
          'px';
      };
    });

    onUpdated(() => {
      // // Attribute (非响应式对象)
      // console.log(context.attrs);
      // // 插槽 (非响应式对象)
      // console.log(context.slots);
      // // 触发事件 (方法)
      // console.log(context.emit);
    });

    for (let i = 0; i < 46; i++) {
      data.tableData.push({
        key: i,
        name: `Edward King ${i}`,
        gender: i % 2 == 0 ? '男' : '女',
        updateTime: '2021-07-01 15:01:01',
        pictureNumber: i + Math.floor(Math.random() * 100),
      });
    }

    const onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      data.selectedRowKeys = selectedRowKeys;
    };

    const handleSearch = () => {
      console.log('搜索');
    };
    const handleExportByCondition = () => {
      console.log('按条件差选');
    };

    const handleDetailClick = id => {
      proxy.$root.$router.push({ path: '/detail', query: { id: id } });
    };

    const handleExportRecoder = () => {
      proxy.$root.$router.push({ path: '/list', query: {} });
    };

    return {
      ...toRefs(data),
      onSelectChange,
      handleSearch,
      handleExportByCondition,
      handleDetailClick,
      handleExportRecoder,
    };
  },
};
</script>
<style scoped>
.box {
  height: calc(100% - 32px);
}
.table-box {
  margin-top: 20px;
  height: calc(100% - 150px);
}
</style>
